import React, {useEffect, useRef, useState} from 'react';
import path from '../assets/fangzhi.mp4';

const Buttom4 = () => {
    const [progress, setProgress] = useState(0);
    const videoRef = useRef(null);

    useEffect(() => {
        const videoElement = videoRef.current;
        videoElement.currentTime = 17;
        videoElement.play();

        const updateProgress = () => {
            setProgress((videoElement.currentTime / videoElement.duration) * 100);
        };

        videoElement.addEventListener('timeupdate', updateProgress);

        return () => {
            videoElement.removeEventListener('timeupdate', updateProgress);
        };
    }, []);

    const handleSeek = (event) => {
        const videoElement = videoRef.current;
        const progressBar = event.currentTarget;
        const clickX = event.nativeEvent.offsetX;
        const progressBarWidth = progressBar.offsetWidth;
        videoElement.currentTime = (clickX / progressBarWidth) * videoElement.duration;
    };

    return (
        <div className="video-container">
            <video ref={videoRef} width="300" height="160" autoPlay muted>
                <source src={path} type="video/mp4" />
                Your browser does not support the video tag.
            </video>
            <div className="progress-bar" onClick={handleSeek}>
                <div className="progress" style={{ width: `${progress}%` }}></div>
            </div>
        </div>
    );
};

export default Buttom4;
